<template>
  <view class="card">
    <!-- 头部 -->
    <view class="card_title">
      <text>{{ title }} <i>></i></text>
      <i class="iconfont icon-gengduo1"></i>
    </view>
    <!-- 歌单 -->
    <scroll-view class="scroll-view" scroll-x="true">
      <view class="scroll-view-item" v-for="item in result" :key="item.id" @click="gotoPlaylist(item.id)">
        <view class="scroll-view-item-context">
          <!-- 图片 -->
          <image class="scroll-image" :src="item.picUrl"></image>
          <!-- 介绍 -->
          <view class="scroll-text">{{ item.name }}</view>
          <!-- 播放图标 -->
          <view class="scroll-play-icon" @click="playMusic(item.id)">
            <i class="iconfont icon-yinlequan" v-show="!item.isPay"></i>
            <i class="iconfont icon-paihangbang1" v-show="item.isPay"></i>
          </view>
          <!-- 播放次数 -->
          <text class="scroll-play-num">{{ convertToWan(item.playCount) }}</text>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
  import {
    ref,
    computed
  } from 'vue'

  import { convertToWan } from '@/util/convertToWan.js'
  
  const props = defineProps({
    result: Array,
    title: String
  })
  props.result.forEach(item => {
    item.isPay = false
  })
  // 播放音乐
  const playMusic = (id) => {
    props.result.forEach(item => {
      if (item.id === id) {
        item.isPay = !item.isPay
      }else{
        item.isPay = false
      } 
    })
  }
  // 跳转到歌单详情页
  const gotoPlaylist = (id) => {
    uni.navigateTo({
      url:`/subpages/songList/songList?id=${id}`,
    })
  }
</script>

<style lang="scss" scoped>
  .icon-yinlequan,
  .icon-paihangbang1 {
    font-size: 25px;
    color: #fff;
    font-weight: bold;
  }

  .card {
    height: 360rpx;
    width: 100%;
    box-sizing: border-box;

    .card_title {
      padding: 0 20rpx;
      display: flex;
      height: 60rpx;
      align-items: center;
      justify-content: space-between;
    }

    .scroll-view {
      height: 290rpx;
      white-space: nowrap;

      .scroll-view-item {
        display: inline-block;
        height: 290rpx;
        width: 230rpx;
        margin: 0 20rpx;

        .scroll-view-item-context {
          height: 100%;
          position: relative;
          display: flex;
          flex-direction: column;
          justify-content: space-around;

          .scroll-image {
            width: 230rpx;
            height: 230rpx;
            border-radius: 10px;
          }

          .scroll-text {
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }

          .scroll-play-icon {
            position: absolute;
            right: 20rpx;
            bottom: 70rpx;
            cursor: pointer;
          }

          .scroll-play-num {
            position: absolute;
            top: 20rpx;
            right: 10rpx;
            color: #fff;
            font-weight: bold;
          }
        }
      }
    }
  }
</style>